@function pxrem($args) {
  @return $args/75 + rem;
}
*{
  padding: 0;
  margin: 0;
  list-style: none;
}
img{
  float: left;
  width:100%;
  height:100%;
}
html{
  font-size: 75px;
}
header.app-head{
  width:10rem;
  height: pxrem(200);
  background-color: #e4463b;
  div.app-head-top{
    width:100%;
    height:pxrem(100);
    box-sizing: border-box;
    padding-top: pxrem(32);
    div.app-head-logo{
      float: left;
      width:pxrem(44);
      height:pxrem(33);
      margin-left: pxrem(32);
    }
    div.app-head-middle{
      width:pxrem(288);
      height:pxrem(52);
      margin: 0 auto;
      .rotlink{
        float: left;
        width:pxrem(52);
        height:pxrem(52);
        background: url("./assets/hdicon01.png") no-repeat;
        background-size: cover;
      }
      .rotlink1{
        background: url("./assets/hdicon02.png") no-repeat;
        background-size: cover;
        margin-right:pxrem(66);
        margin-left:pxrem(66);
      }
      .rotlink2{
        background: url("./assets/hdicon03.png") no-repeat;
        background-size: cover;
      }
      .active{
        background: url("./assets/hdicon1.png") no-repeat;
        background-size: cover;
      }
      .active1{
        background: url("./assets/hdicon2.png") no-repeat;
        background-size: cover;
      }
      .active2{
        background: url("./assets/hdicon3.png") no-repeat;
        background-size: cover;
      }
    }
    div.app-head-middle-bottom{
      width:pxrem(750);
      height:pxrem(100);
      .app-head-middle-bottomchild{
        float: left;
        font-size: pxrem(12);
        color: #ffffff;
        padding: pxrem(35) pxrem(94) pxrem(20) pxrem(94);
      }
    }
  }
}

